<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>九子成三棋</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
</head>

<body>
    <div class="header-title">九子成三棋</div>
    <!-- 登录界面 -->
    <div id="login" class="container">
        <img id="login-logo" src="./static/logo.png" alt="LOGO">
        <input type="text" class="login-input" placeholder="输入昵称，长度2~6位" autofocus>
        <span class="btn-default">进入</span>
    </div>
    <!-- 房间列表 -->
    <div id="rooms"></div>
    <!-- 棋盘 -->
    <div id="chess-box" hidden>
        <svg width="300" height="300" viewBox="-25 -25 350 350" style="cursor:pointer">
            <path
                d="m2 2 h298 v298 h-298 v-300,m50 50 h198 v198 h-198 v-200,m50 50 h98 v98 h-98 v-100,m-102 52 h100,m100 0 h100,m-148 -148 v100,m0 98 v100 z"
                style="fill:transparent;stroke:gray;stroke-width:4"></path>
            <defs>
                <radialGradient id="chess-fill-black">
                    <stop offset="10%" stop-color="rgb(150, 150, 150)" />
                    <stop offset="95%" stop-color="rgb(0, 0, 0)" />
                </radialGradient>
                <radialGradient id="chess-fill-white">
                    <stop offset="25%" stop-color="rgb(255, 255, 255)" />
                    <stop offset="95%" stop-color="rgb(230, 230, 230)" />
                </radialGradient>
                <radialGradient id="chess-fill-green">
                    <stop offset="10%" stop-color="rgba(255, 255, 255,0.3)" />
                    <stop offset="95%" stop-color="rgba(0, 128, 0, 0.3)" />
                </radialGradient>
                <radialGradient id="chess-fill-red">
                    <stop offset="10%" stop-color="rgba(255, 255, 255,0.3)" />
                    <stop offset="95%" stop-color="rgba(255, 0, 0, 0.3)" />
                </radialGradient>
                <circle id="chess-transparent" r='18' stroke-width='2' stroke='transparent' fill="transparent"></circle>
                <circle id="chess-black" r='18' stroke-width='2' stroke='rgb(220, 220, 220)'
                    fill="url(#chess-fill-black)"></circle>
                <circle id="chess-white" r='18' stroke-width='2' stroke='rgb(220, 220, 220)'
                    fill="url(#chess-fill-white)"></circle>
                <circle id="chess-green" r='18' stroke-width='2' stroke='rgb(220, 220, 220)'
                    fill="url(#chess-fill-green)"></circle>
                <path id="chess-red" d="m-9 0 h18,m-9 -9 v18"
                    style="fill:transparent;stroke:rgb(255, 0, 0, 0.7);stroke-width:4" transform="rotate(45)">
                </path>
            </defs>
            <g id="chesses">
            </g>
        </svg>
    </div>
    <!-- 进入房间后，房间信息 -->
    <div id="info-box" hidden>
        <div id="user-info" class="container">
            <div class="icon-vs"></div>
        </div>
        <div id="chess-info" class="container">
            <div></div>
            <div id='tips-box'></div>
            <div></div>
        </div>
    </div>
    <!-- 底部功能区 -->
    <div id="bottom-box">
        <!-- 聊天 -->
        <div id="chat-zoom">
            <ul id="chat-list" class="simple"></ul>
            <div id="chat-control">
                <span class='btn-light' data-method='all'>[世界]</span>
                <input type="text" placeholder="请文明发言~">
                <span class='btn-dark'>发送</span>
            </div>
            <div id="chat-btn-group">
                <span>展开</span>
            </div>
        </div>
        <!-- 按钮组 -->
        <div id="opts-zoom">
            <div class="icon-logo" style='font-size:1.2rem'>
                <span id="opts-username">用户名</span>
            </div>
            <div id="opts-btn-group"></div>
        </div>
    </div>
</body>
<script src="./js/ws.js"></script>
<script src="./js/render.js"></script>
<script src="./js/game.js"></script>
<script src="./js/index.js"></script>

</html>